<template>
  <view class="content" tabindex="-1" @keydown.native="handleKeyDown">
    <view class="category-wrapper">
      <scroll-view class="category-selector" :class="{ 'selector-expanded': showTriangle }" scroll-x :enhanced="true"
        :show-scrollbar="false" :scroll-into-view="scrollIntoViewId">
        <view class="category-list" :class="{ 'list-expanded': showTriangle }">
          <view v-for="category in categories" :key="category.id"
            :class="['category-item', currentCategoryId === category.id ? 'active' : '']"
            :id="'category-' + category.id" @tap="selectCategory(category.id)">
            <text>{{category.name}}</text>
          </view>
        </view>
      </scroll-view>
      <view class="floating-triangle" :class="{ 'triangle-show': showTriangle, 'active': isTriangleActive }"
        @tap="toggleTriangle"></view>
    </view>

    <view class="main-content">
      <view class="question-container" v-if="currentQuestion" @touchstart="touchStart" @touchend="touchEnd"
        ref="questionContainer" tabindex="0">
        <view :class="['question-content-wrap', fadeIn ? 'fade-in' : (isReverse ? 'fade-out-reverse' : 'fade-out')]">
          <view class="question-header">
            <view class="header-left">
              <text class="question-title">{{currentQuestion.title || '请根据上下文填空'}}</text>
              <view class="question-stats">
                <text class="stats-item">已练习{{currentStats.totalAttempts}}次</text>
                <text class="stats-item" v-if="currentStats.totalAttempts > 0">
                  正确率{{calculateAccuracy(currentStats)}}%
                </text>
              </view>
            </view>
            <text class="question-number">第 {{currentQuestionIndex + 1}}/{{totalQuestions}} 题</text>
          </view>

          <view class="article">
            <template v-for="(content, index) in processedContent" :key="index">
              <text>{{content}}</text>
              <block v-if="index < currentQuestion.blanks.length">
                <input class="blank-input" :class="{ 'error': showResult && wrongAnswers.has(index) }"
                  :value="userAnswers[index]" :placeholder="'填空' + (index + 1)" :data-index="index"
                  @input="onInputChange" @confirm="onInputConfirm" @focus="onInputFocus" @blur="onInputBlur"
                  :focus="currentFocusIndex === index" />
              </block>
            </template>
          </view>

          <view class="result-container">
            <view v-if="showResult" :class="['result', isCorrect ? 'correct' : 'wrong']">
              <view v-if="isCorrect">回答正确!</view>
              <view v-else>
                <view>回答错误，正确答案是：</view>
                <view v-for="(answer, index) in currentQuestion.blanks" :key="index">
                  填空{{index + 1}}: {{answer}}
                </view>
              </view>
            </view>
          </view>

          <view v-if="showResult" class="explanation">
            <text class="explanation-title">答案解析</text>
            <text>{{currentQuestion.explanation}}</text>
          </view>
        </view>


      </view>

      <view class="empty-state" v-else>
        <text>该分类暂无题目</text>
      </view>
    </view>

    <view class="fixed-buttons">
      <button class="action-btn" @tap="showAllQuestions">查看全部</button>
      <button class="action-btn" @tap="showJumpDialog">跳转题号</button>
      <button class="action-btn" @tap="prevQuestion">上一题</button>
      <button class="action-btn" @tap="nextQuestion">下一题</button>
      <button class="action-btn submit" @tap="checkAnswer">提交答案</button>
    </view>

    <view class="popup-mask" v-if="showAllList" @tap="closeAllQuestions"></view>
    <view class="custom-popup" v-if="showAllList">
      <view class="all-questions-popup">
        <view class="popup-header">
          <text class="popup-title">{{categories[categoryIndex]?.name}}错题列表</text>
          <text class="close-btn" @tap="closeAllQuestions">×</text>
        </view>
        <scroll-view class="questions-list" scroll-y>
          <view v-for="(question, index) in categoryQuestions" :key="question.id" class="question-preview"
            @tap="jumpToQuestionByIndex(index)">
            <text class="question-index">第{{index + 1}}题</text>
            <view class="question-content">
              <view class="question-title">{{question.title || '请根据上下文填空'}}</view>
              <view class="question-text">
                <template v-for="(content, cIndex) in question.content" :key="cIndex">
                  <text>{{formatContent(content)}}</text>
                  <text v-if="cIndex < question.blanks.length"
                    class="answer-highlight">【{{question.blanks[cIndex]}}】</text>
                </template>
              </view>
            </view>
          </view>
          <view v-if="categoryQuestions.length === 0" class="empty-state">
            <text>暂无错题记录</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="popup-mask" v-if="showJumpPopup" @tap="closeJumpDialog"></view>
    <view class="custom-popup" v-if="showJumpPopup">
      <view class="all-questions-popup">
        <view class="popup-header">
          <text class="popup-title">跳转到指定题号</text>
          <text class="close-btn" @tap="closeJumpDialog">×</text>
        </view>
        <view class="popup-content">
          <input type="number" class="jump-input" v-model="jumpIndex" :placeholder="`请输入题号(1-${totalQuestions})`" />
          <button class="jump-confirm-btn" @tap="jumpToQuestion">确定</button>
        </view>
      </view>
    </view>

    <view class="category-mask" :class="{ 'show': showTriangle }" @tap="toggleTriangle"></view>

    <!-- 自定义模态框 -->
    <view class="modal-mask" v-if="modalShow"></view>
    <view class="modal-container" v-if="modalShow">
      <view class="modal-content">
        <view class="modal-title">恭喜</view>
        <view class="modal-text">你已经好地掌握了这道题，是否从错题集中移除？</view>
        <view class="modal-buttons">
          <button class="modal-btn cancel" @tap="handleModalCancel">取消</button>
          <button class="modal-btn confirm" @tap="handleModalConfirm" @confirm="handleModalConfirm">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { questionBank, questionStorage } from '@/store/questions.js'

export default {
  data() {
    return {
      currentCategoryId: 1,
      currentQuestionIndex: 0,
      userAnswers: [],
      showResult: false,
      isCorrect: false,
      categories: [],
      categoryQuestions: [],
      wrongQuestions: [],
      jumpIndex: '',
      showAllList: false,
      showJumpPopup: false,
      touchStartX: 0,
      touchStartY: 0,
      touchEndX: 0,
      touchEndY: 0,
      fadeIn: true,
      isReverse: false,
      isPc: false,
      showTriangle: false,
      isTriangleActive: false,
      answers: [],
      wrongAnswers: new Set(),
      currentFocusIndex: 0,
      scrollIntoViewId: '',
      currentStats: { totalAttempts: 0, correctCount: 0 },
      showRemoveConfirm: false,
      currentRemoveCallback: null,
      modalShow: false,
      needFocus: false
    }
  },
  onShow() {
    this.initializeData()
    // 使用新的 API 取系统信息
    // @ts-ignore
    const systemInfo = wx.getAppBaseInfo()
    this.isPc = systemInfo.platform === 'windows' || systemInfo.platform === 'mac'
    if (this.isPc) {
      // 移除旧的事件监听方式
      document.removeEventListener('keydown', this.handleKeyDown)
      // 添加新的事件监听
      document.addEventListener('keydown', this.handleKeyDown)
    }
    setTimeout(() => {
      this.currentFocusIndex = 0
    }, 100)
  },
  onHide() {
    if (this.isPc) {
      document.removeEventListener('keydown', this.handleKeyDown)
    }
  },
  onUnload() {
    if (this.isPc) {
      document.removeEventListener('keydown', this.handleKeyDown)
    }
  },
  computed: {
    currentQuestion() {
      return this.categoryQuestions[this.currentQuestionIndex] || null
    },
    totalQuestions() {
      return this.categoryQuestions.length
    },
    questionStats() {
      return this.currentStats
    },
    processedContent() {
      return this.currentQuestion?.content.map(text => text.replace(/\\n/g, '\n')) || []
    }
  },
  methods: {
    initializeData() {
      questionBank.initQuestions()
      this.categories = questionBank.getCategories()
      this.loadCategoryQuestions(this.currentCategoryId)

      if (!this.currentQuestion) {
        const categoryWithQuestions = this.categories.find(category =>
          questionBank.getQuestionsByCategory(category.id).length > 0
        )
        if (categoryWithQuestions) {
          this.selectCategory(categoryWithQuestions.id)
        }
      }

      // 加载当前题目的统计数据
      this.updateQuestionStats()
    },
    updateQuestionStats() {
      if (this.currentQuestion) {
        this.currentStats = questionStorage.getQuestionStats(this.currentQuestion.id)
        // 强制更新视图
        this.$forceUpdate()
      } else {
        this.currentStats = { totalAttempts: 0, correctCount: 0 }
      }
    },
    selectCategory(categoryId) {
      this.currentCategoryId = categoryId;
      this.currentQuestionIndex = 0;
      this.resetQuestion();
      this.loadCategoryQuestions(categoryId);
      // 立即更新当前题目的统计数据
      this.$nextTick(() => {
        this.updateQuestionStats()
      })

      // 收起展开的分类列表
      if (this.showTriangle) {
        this.toggleTriangle();
      }

      // 延时设置滚动，确保在列表收起后再滚动到标位置
      setTimeout(() => {
        this.scrollIntoViewId = 'category-' + categoryId;
      }, 300);
    },
    loadCategoryQuestions(categoryId) {
      // 获取当前分类的所有题目
      const allQuestions = questionBank.getQuestionsByCategory(categoryId)
      // 过滤出错题
      this.categoryQuestions = allQuestions.filter(question =>
        questionStorage.shouldAddToWrongSet(question.id)
      )
      // 加载完新题目后立即更新统计数据
      this.$nextTick(() => {
        this.updateQuestionStats()
      })
    },
    resetQuestion() {
      this.showResult = false
      this.userAnswers = new Array(this.currentQuestion?.blanks?.length || 0).fill('')
      this.isCorrect = false
      this.needFocus = true
      this.$nextTick(() => {
        this.currentFocusIndex = 0
      })
    },
    onInputChange(e) {
      const index = parseInt(e.currentTarget.dataset.index)
      const value = e.detail.value

      if (!this.userAnswers) {
        this.userAnswers = new Array(this.currentQuestion.blanks.length).fill('')
      }

      this.$set(this.userAnswers, index, value)
    },
    checkAnswer() {
      if (!this.currentQuestion || !this.currentQuestion.blanks) return

      this.wrongAnswers.clear()
      let allCorrect = true

      this.currentQuestion.blanks.forEach((answer, idx) => {
        if (this.userAnswers[idx] !== answer) {
          this.wrongAnswers.add(idx)
          allCorrect = false
        }
      })

      if (allCorrect) {
        if (!this.showResult) {
          questionStorage.saveProgress(this.currentQuestion.id, true)
          this.updateQuestionStats()

          // 检查是否可以从错题集移除
          if (questionStorage.shouldRemoveFromWrongSet(this.currentQuestion.id)) {
            this.showRemoveConfirm = true
            this.currentRemoveCallback = () => {
              // 重新加载当前类的题目
              const allQuestions = questionBank.getQuestionsByCategory(this.currentCategoryId)
              // 过滤出错题
              this.categoryQuestions = allQuestions.filter(question =>
                questionStorage.shouldAddToWrongSet(question.id)
              )

              // 如果还有错题，跳转到下一题
              if (this.categoryQuestions.length > 0) {
                // 调整前题目索引
                if (this.currentQuestionIndex >= this.categoryQuestions.length) {
                  this.currentQuestionIndex = 0
                }
                uni.showToast({
                  title: '已移除该题',
                  icon: 'success'
                })
              } else {
                // 如果没有错题了，显示提示
                uni.showToast({
                  title: '当前分类错题已清空',
                  icon: 'success'
                })
                this.currentQuestion = null
              }
            }
            uni.showModal({
              title: '恭喜',
              content: '你已经很好地掌握了这道题，���否从错题集中移除？',
              success: (res) => {
                if (res.confirm) {
                  this.handleRemoveConfirm()
                }
                this.showRemoveConfirm = false
                this.currentRemoveCallback = null
              }
            })
            return
          }
        }

        uni.showToast({
          title: '回答正确！',
          icon: 'success'
        })

        // 无论是否显示过结果，只要答对了就跳转下一题
        setTimeout(() => {
          this.nextQuestion()
          // 在切换题目后自动聚焦
          setTimeout(() => {
            this.currentFocusIndex = 0
          }, 300)
        }, 1000)
      } else {
        // 答错的情况
        if (!this.showResult) {
          questionStorage.saveProgress(this.currentQuestion.id, false)
          this.updateQuestionStats()
          uni.showToast({
            title: '有答案不正确，请检查',
            icon: 'none'
          })
        }
      }

      this.showResult = true
      this.isCorrect = allCorrect
      this.$forceUpdate()
    },
    nextQuestion() {
      this.fadeIn = false
      this.isReverse = false
      setTimeout(() => {
        if (this.currentQuestionIndex < this.totalQuestions - 1) {
          this.currentQuestionIndex++
          setTimeout(() => {
            this.resetQuestion()
            this.fadeIn = true
            this.updateQuestionStats()
            // 在切换题目后自动聚焦
            setTimeout(() => {
              this.currentFocusIndex = -1  // 先重置焦点
              this.$nextTick(() => {
                this.currentFocusIndex = 0  // 再设置焦点
              })
            }, 100)
          }, 50)
        } else {
          uni.showToast({
            title: '该分类错题已完成！',
            icon: 'success'
          })
          this.currentQuestionIndex = 0
          setTimeout(() => {
            this.resetQuestion()
            this.fadeIn = true
            this.updateQuestionStats()
            // 回到第一题时也自动聚焦
            setTimeout(() => {
              this.currentFocusIndex = -1  // 先重置焦点
              this.$nextTick(() => {
                this.currentFocusIndex = 0  // 再设置焦点
              })
            }, 100)
          }, 50)
        }
      }, 250)
    },
    calculateAccuracy(stats) {
      if (!stats || stats.totalAttempts === 0) return 0
      return Math.round((stats.correctCount / stats.totalAttempts) * 100)
    },
    jumpToQuestion() {
      const index = parseInt(this.jumpIndex)
      if (isNaN(index) || index < 1 || index > this.totalQuestions) {
        uni.showToast({
          title: `请输入1-${this.totalQuestions}之的数`,
          icon: 'none'
        })
        return
      }

      this.currentQuestionIndex = index - 1
      this.resetQuestion()
      this.closeJumpDialog()

      uni.showToast({
        title: `已跳转到第${index}题`,
        icon: 'success'
      })
    },
    showAllQuestions() {
      this.showAllList = true
      // 重新加载当前分类的所有错题
      const allQuestions = questionBank.getQuestionsByCategory(this.currentCategoryId)
      // 过滤出错题
      this.categoryQuestions = allQuestions.filter(question =>
        questionStorage.shouldAddToWrongSet(question.id)
      )
    },
    closeAllQuestions() {
      this.showAllList = false
    },
    jumpToQuestionByIndex(index) {
      this.currentQuestionIndex = index
      this.resetQuestion()
      this.closeAllQuestions()
      // 切换题目后自动聚焦
      setTimeout(() => {
        this.currentFocusIndex = -1
        this.$nextTick(() => {
          this.currentFocusIndex = 0
        })
      }, 100)
    },
    showJumpDialog() {
      this.jumpIndex = ''
      this.showJumpPopup = true
    },
    closeJumpDialog() {
      this.showJumpPopup = false
    },
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--
        setTimeout(() => {
          this.resetQuestion()
          this.fadeIn = true
          this.updateQuestionStats()
        }, 50)
      } else {
        uni.showToast({
          title: '已经是第一题了',
          icon: 'none'
        })
        setTimeout(() => {
          this.resetQuestion()
          this.fadeIn = true
          this.updateQuestionStats()
        }, 50)
      }
    },
    touchStart(e) {
      this.touchStartX = e.touches[0].clientX
      this.touchStartY = e.touches[0].clientY
    },
    touchEnd(e) {
      this.touchEndX = e.changedTouches[0].clientX
      this.touchEndY = e.changedTouches[0].clientY

      const moveX = this.touchEndX - this.touchStartX
      const moveY = this.touchEndY - this.touchStartY

      if (Math.abs(moveX) > Math.abs(moveY) && Math.abs(moveX) > 100 && this.currentQuestion) {
        if (moveX > 0) {
          this.fadeIn = false
          this.isReverse = true
          setTimeout(() => {
            this.prevQuestion()
          }, 250)
        } else {
          this.fadeIn = false
          this.isReverse = false
          setTimeout(() => {
            this.nextQuestion()
          }, 250)
        }
      }
    },
    handleKeyDown(e) {
      if (this.isPc) {
        console.log('键盘事件:', e)
        if (e.keyCode === 37) { // 左方向键
          this.prevQuestion()
        } else if (e.keyCode === 39) { // 右方向键
          this.nextQuestion()
        } else if (e.keyCode === 13) { // Enter 键
          if (this.showRemoveConfirm) {
            this.handleRemoveConfirm()
          }
        } else if (e.keyCode === 9) { // Tab 键
          e.preventDefault() // 阻止默认行为
          this.handleTabKey(e.shiftKey) // 传入是否按住 Shift 键
        }
      }
    },
    handleTabKey(isShiftKey) {
      if (!this.currentQuestion || !this.currentQuestion.blanks) return

      const totalBlanks = this.currentQuestion.blanks.length

      // 如果当前没有焦点，设置为第一个
      if (this.currentFocusIndex === -1) {
        this.currentFocusIndex = 0
        return
      }

      // 根据是否按住 Shift 键决定方向
      if (isShiftKey) {
        // Shift + Tab 向后移动
        this.currentFocusIndex = this.currentFocusIndex <= 0 ? totalBlanks - 1 : this.currentFocusIndex - 1
      } else {
        // Tab 向前移动
        this.currentFocusIndex = this.currentFocusIndex >= totalBlanks - 1 ? 0 : this.currentFocusIndex + 1
      }

      // 确保索引在有效范围内
      this.currentFocusIndex = Math.max(0, Math.min(this.currentFocusIndex, totalBlanks - 1))
    },
    processQuestionContent(content) {
      return content.map(text => text.replace(/\\n/g, '\n'))
    },
    toggleTriangle() {
      this.showTriangle = !this.showTriangle;
      this.isTriangleActive = this.showTriangle;
    },
    onInputConfirm() {
      this.checkAnswer()
    },
    handleRemoveConfirm() {
      if (this.currentRemoveCallback) {
        this.currentRemoveCallback()
        this.showRemoveConfirm = false
        this.currentRemoveCallback = null
        this.$forceUpdate()
        if (this.categoryQuestions.length > 0) {
          setTimeout(() => {
            this.currentFocusIndex = 0
          }, 100)
        }
      }
    },
    handleModalConfirm() {
      this.handleRemoveConfirm()
      this.modalShow = false
    },
    handleModalCancel() {
      this.showRemoveConfirm = false
      this.currentRemoveCallback = null
      this.modalShow = false
    },
    onInputFocus(e) {
      const index = parseInt(e.currentTarget.dataset.index)
      this.currentFocusIndex = index
      // 取消自动重置焦点
      this.needFocus = false
    },
    onInputBlur() {
      // 移除自动重置焦点的逻辑
      // if (this.needFocus) {
      //   this.$nextTick(() => {
      //     this.currentFocusIndex = 0
      //   })
      // }
    },
    getPreviewContent(content) {
      // 限制预览内容的长度，避免太长
      const maxLength = 50
      if (content.length > maxLength) {
        return content.substring(0, maxLength) + '...'
      }
      return content
    },
    getQuestionStats(questionId) {
      return questionStorage.getQuestionStats(questionId)
    },
    formatContent(content) {
      if (!content) return ''
      // 处理换行符和空格
      return content.replace(/\\n/g, '\n').replace(/\\s/g, ' ')
    }
  },
  watch: {
    currentQuestion: {
      immediate: true,
      handler() {
        this.needFocus = true
        this.$nextTick(() => {
          this.currentFocusIndex = 0
        })
      }
    }
  }
}
</script>

<style>
.content {
  padding: 20rpx;
  padding-bottom: 0;
  outline: none !important;
  user-select: none;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  outline: none;
}

.question-container {
  background: #fff;
  padding: 40rpx 60rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 340rpx);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 340rpx);
  position: relative;
  outline: none;
}

.question-header {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  align-items: flex-start;
  /* margin-bottom: 30rpx; */
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.question-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.question-stats {
  display: flex;
  gap: 20rpx;
  font-size: 24rpx;
  color: #666;
}

.stats-item {
  font-size: 24rpx;
  color: #666;
  background: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  min-width: 120rpx;
  text-align: center;
}

.question-number {
  font-size: 28rpx;
  color: #666;
  background: #f5f5f5;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.explanation {
  margin-top: 10rpx;
  padding: 30rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.explanation-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.next-btn {
  background: #4CAF50;
  color: #fff;
  margin-top: 20rpx;
}

.category-wrapper {
  position: relative;
  /* margin-bottom: 20rpx; */
}

.category-selector {
  padding: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 11;
  width: auto;
  height: auto;
  max-height: 80rpx;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.selector-expanded {
  max-height: 600rpx !important;
}

.category-list {
  display: flex;
  flex-wrap: nowrap;
  /* padding: 0 10rpx; */
  gap: 20rpx;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
  white-space: nowrap;
  /* padding-bottom: 10rpx; */
}

.list-expanded {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180rpx, 1fr));
  gap: 20rpx;
  padding: 10rpx;
}

.category-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16rpx 24rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #666;
  background: #f5f5f5;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.category-item:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.category-item.active {
  background: #C41E3A;
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(196, 30, 58, 0.3);
  transform: translateY(-2rpx);
}

.category-item.active::after {
  display: none;
}

.floating-triangle {
  position: absolute;
  /* bottom: -30rpx; */
  /* left: 50%; */
  left: 97%;
  transform: translateX(-50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 25rpx solid transparent;
  border-right: 25rpx solid transparent;
  border-bottom: 25rpx solid #cccccc;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  /* opacity: 0.8; */
  opacity: 0.4;
  z-index: 10;
}

.floating-triangle.active {
  border-bottom-color: #007AFF;
  opacity: 1;
}

.triangle-show {
  transform: translateX(-50%) rotate(0deg);
}

.empty-state {
  text-align: center;
  padding: 40rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  color: #999;
  font-size: 28rpx;
}

.blank-input {
  display: inline-block;
  width: 200rpx;
  border-bottom: 2rpx solid #007AFF;
  margin: 0 10rpx;
  padding: 4rpx 0;
  text-align: center;
  vertical-align: middle;
}

.fixed-buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10rpx;
  background: rgba(255, 255, 255, 0.9);
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #C41E3A;
  color: #fff;
  padding: 0;
  margin: 0;
}

.action-btn.submit {
  background: #C41E3A;
  color: #fff;
}

.result-container {
  clear: both;
  padding-top: 10rpx;
  margin-bottom: 0;
}

.result {
  text-align: left;
  padding: 30rpx;
  border-radius: 8rpx;
}

.correct {
  background: #e8f5e9;
  color: #4caf50;
}

.wrong {
  background: #ffebee;
  color: #f44336;
}

.popup-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
}

.custom-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.all-questions-popup {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  padding: 0 20rpx;
}

.questions-list {
  max-height: calc(80vh - 94rpx);
  padding: 20rpx;
}

.question-preview {
  padding: 20rpx;
  border-bottom: 2rpx solid #eee;
  background: #fff;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}

.question-preview:active {
  background: #f5f5f5;
}

.question-index {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.question-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  padding: 10rpx;
  background: #f8f8f8;
  border-radius: 6rpx;
}

.question-text {
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  margin: 10rpx 0;
}

.highlight {
  color: #8B0000;
  font-weight: bold;
  display: inline;
  margin: 0 2rpx;
}

.article {
  flex: 1;
  padding: 20rpx 20rpx;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  line-height: 1.8;
}

.article text {
  white-space: pre-wrap;
  display: inline;
  margin-bottom: 20rpx;
}

.question-content text {
  white-space: pre-wrap;
  display: inline;
  line-height: 1.8;
  margin-bottom: 20rpx;
}

.question-content-wrap {
  transition: opacity 0.3s ease;
  opacity: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.fade-in {
  opacity: 1;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fade-out {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  height: 100%;
}

.fade-out-reverse {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  height: 100%;
}

.popup-content {
  padding: 30rpx;
}

.jump-input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  margin-bottom: 30rpx;
}

.jump-confirm-btn {
  background: #C41E3A;
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
}

.main-content {
  flex: 1;
  overflow: auto;
  margin-bottom: 130rpx;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  /* padding-top: 20rpx; */
}

.question-preview .question-content text {
  white-space: pre-wrap;
  display: inline;
}

.explanation text {
  white-space: pre-wrap;
  /* display: inline; */
  display: block;
}

.category-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.category-mask.show {
  opacity: 1;
  visibility: visible;
}

/* 加错误状态样式 */
.blank-input.error {
  border-bottom-color: #ff0000;
}

/* 模态框样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
}

.modal-text {
  font-size: 28rpx;
  text-align: center;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #fff;
  background: #C41E3A;
}

.modal-btn.cancel {
  background: #999;
}

.modal-btn.confirm {
  background: #C41E3A;
}

.question-stats {
  font-size: 24rpx;
  color: #666;
  /* margin-top: 10rpx;
  padding-top: 10rpx;
  border-top: 1px solid #eee; */
}

.question-title {
  font-weight: bold;
  /* margin-bottom: 10rpx; */
}

.answer-highlight {
  color: #ff0000;
  font-weight: bold;
  display: inline;
  margin: 0 2rpx;
}
</style>
